<?php
$store = Mage::app()->getStore();
$code  = $store->getCode();
//Get store id
$storeId    = Mage::app()->getStore()->getId();
$show_columns = Mage::getStoreConfig("slidermenu/menu/show_column", $code);
//Get category model
$_category = Mage::getModel('catalog/category')->setStoreId($storeId);
$_cat = $_category->load(Mage::app()->getStore()->getRootCategoryId());

?>

<div class="nav-container">
    <a id="mobnav"><?php echo $this->__('Menu'); ?></a>
<?php
function hasMenuChildren($_cat){
    $return_val = false;
    if($_cat->hasChildren()){
        $_children = $_cat->getChildren();
        $children_ids = explode(",", $_children);
        foreach ($children_ids as $child_id){
            $_child = Mage::getModel('catalog/category')->setStoreId($storeId)->load($child_id);
            if($_child->getIncludeInMenu()){
                $return_val = true;
            }
        }
    }
    return $return_val;
}
function cmpCatPosition($a, $b) {
    if ($a->position == $b->position)
        return 0;
    return ($a->position > $b->position) ? 1 : -1;
}
function showChildrenCategories($_category, $level, $level_limit, $columns){
    $storeId = Mage::app()->getStore()->getId();
    $html = '';
    if($level == 0){
        $html .= '<ul id="nav" class="megamenu">';
    } else {
        $html .= '<ul class="level'.$level.'">';
    }
    $_children = $_category->getChildren();
    $children_ids = explode(",", $_children);
    $i = 0;
    $categoryChildren = array();   
    if ($children_ids) {
        foreach ($children_ids as $categoryId){
            $category = Mage::getModel('catalog/category')->load($categoryId);
            $categoryChildren[] = $category;
        }
    }

    usort($categoryChildren, 'cmpCatPosition');

    foreach ($categoryChildren as $_child){
        if($_child->getIncludeInMenu()){
            $html .= '<li class="level'.$level;
            if($level == 1 && ($i%$columns) == 0){
                $html .= ' first';
            }
            if( hasMenuChildren($_child) && $level < $level_limit ){
                $html .= ' parent';
            }
            $html .='">';
            $html .= '<a href ="'.$_child->getUrl().'"><span>';
            $html .= $_child->getName();
            if( hasMenuChildren($_child) && $level < $level_limit ){
                $html .= ' <em>+</em>';
            }
            $html .= '</span></a>';
            if( hasMenuChildren($_child) && $level < $level_limit ){
                $html .= showChildrenCategories($_child, $level+1, $level_limit, $columns);
                $html .= '<span class="plus"></span>';
            }
            $html .= '</li>';
            $i++;
        }
    }
    $html .= '</ul>';
    return $html;
}
echo showChildrenCategories($_cat, 0, 3, $show_columns);
?>
</div><?php //content ?>
<script type="text/javascript">
document.observe("dom:loaded", function() {
    //run navigation without delays and with default id="#nav"
    //mainNav();

    //run navigation with delays
    mainNav("nav", {"show_delay":"0","hide_delay":"500"});
});
var show_columns = <?php echo $show_columns ?>;
jQuery(document).ready(function(){
    jQuery("#nav li span.plus").click(function(event){
        event.stopPropagation();
        jQuery(".form-language .select-language .sbOptions").fadeOut();
        jQuery(".form-language .select-language .sbToggle").removeClass('sbToggleOpen');
        if(jQuery(this).hasClass('expanded')){
            jQuery(this).removeClass('expanded');
            jQuery(this).parent().removeClass('expanded');
            jQuery(this).parent().children('ul').fadeOut();
        } else {
            jQuery(this).parent().parent().children('li.expanded').children('ul').hide();
            jQuery(this).parent().parent().children('li.expanded').children('span.expanded').removeClass('expanded');
            jQuery(this).parent().parent().children('li.expanded').removeClass('expanded');
            jQuery(this).addClass('expanded');
            jQuery(this).parent().addClass('expanded');
            jQuery(this).parent().children('ul').css('left', ((jQuery(window).width()-160*show_columns-30)/2)+"px");
            jQuery(this).parent().children('ul').fadeIn();
        }
    });
    jQuery(window).resize(function(){
        if(jQuery(window).width()>=768 && jQuery(window).width()<=1024)
            jQuery('ul.level1').css('left', ((jQuery(window).width()-160*show_columns-30)/2)+"px");
        else {
            jQuery('ul.level1').css('left', '');
        }
    });
});
</script>